/*
    source-map：一种 提供源代码到构建后的代码映射的技术，（如果构建后的代码出错了，通过映射关系，可以找到源代码中的报错位置）

    devtool: "source-map"
        [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

        source-map：外联，能够得到错误代码的准确信息 和 源代码中的错误位置

        inline-source-map: 内联，将构建后的build.js.map内联到build.js文件中 构建速度快。功能和source-map一样

        hidden-source-map:  外联，生成一个单独的build.js.map文件。只能找到在构建后代码中的出错位置，不能直接定位源代码中的位置

        eval-source-map: 内联，具体到每一个文件对应的sourcemap，而不是一整个的出现。功能和source-map一样，文件名后面多一个hash值

        nosources-source-map：外部的 隐藏源码和构建后代码的位置，从而使得不能直接从网页中找到源码

        cheap-source-map：外部的 只能定位到行，而上面的其他的都可以定位到列上

        cheap-module-source-map：外部的 module会将loader的sourceMap加入进来



        开发环境：速度快，调试更友好
            速度快（eval>inline>cheap）
                eval-cheap-source-map eval-source-map
            调试友好：
                source-map
                cheap-moudle-source-map
                cheap-source-map

        一般选择：eval-source-map 或者 eval-cheap-moudle-source-map

        生产环境：源代码是否要隐藏，调试问题
            内联会让代码的体积非常大，因此内联的方案再生产环境下不考虑
        一般选择：source-map 或者 cheap-moudle-source-map
*/

const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // entry: "./index.js",
    entry: ["./index.js", "./index.html"],
    output: {
        filename: "build.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [
            // loader配置
            {
                // 处理less资源
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                // 处理css资源
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                ]
            },
            {
                // 处理图片资源
                test: /\.(png|jpg|gif)$/,
                loader: "url-loader",
                options: {
                    limit: 8 * 1024,
                    name: "[hash:5].[ext]",
                    // 关闭es6的module 而开启commonjs的module, 与file-loader保持一致
                    esmodule: false,
                    outputPath: "imgs"
                }
            },
            {
                // 处理html中img标签的
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                // 处理其他资源
                exclude: /\.(html|css|less|js|jpg|png|gif)$/,
                loader: "file-loader",
                options: {
                    name: "[hash:5].[ext]",
                    outputPath: "medias"
                }
            }
        ]
    },
    plugins: [
        // plugins的配置
        new HtmlWebpackPlugin({
            template: "index.html"
        })
    ],
    mode: "development",
    devServer: {
        contentBase: resolve(__dirname, "build"),
        compress: true,
        port: 3000,
        open: true,
        // 开启HMR功能
        hot: true
    },
    // sourceMap
    devtool: "source-map"
}